<template>
  <div class="fc_333">
    <div>
      <div class="ub headerDiv ub-ac">
        <div class="ub left ub-pc" @click='backClc'>
          <div class="ub-img1 leftIcon"></div>
          <div>返回</div>
        </div>
        <div class="ub middle ub-pc">
          <div class="tx-c fz12">
            {{title}}
          </div>
        </div>
        <div class="ub right ub-pc">
          <div>
          </div>
          <div class="ub-img"></div>
        </div>
      </div>
    </div>
    <div class="pop-select-bottom ub-f1" style="top:auto" v-show="shuo" @click="show('shuo')">
      <div class="ub ub-ver padding-css2 bg_w">
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">乘机人姓名请与登机时所使用的证件上的姓名一致；</div>
        </div>
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">如乘机人持护照登机，在确定护照上有中文姓名之后方可使用此中文姓名订票。</div>
        </div>
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">乘机人姓名仅支持中文或英文输入，姓名长度为24个字母（12个中文汉字）。</div>
        </div>
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">输入英文姓名时，请控制在24个字母内。（儿童不超过20个字母，婴儿不超过14个字母）。</div>
        </div>
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">输入中文姓名时，请控制在12个汉字内。（儿童不超过10个汉字，婴儿不超过7个汉字）。如果超过字数限制，请按汉字顺序输入姓名，超过的部分抹去即可，切勿省略中间部分。</div>
        </div>
        <div class="ub mt-1 ub-f1">
          <div class="span-1 ub ub-pc ub-ac">■</div>
          <div class="ub ub-f1">如乘机人中文姓名中包含生僻字，请将生僻字及生僻字之后的字用拼音代替；“李小巘”应输入为“李小yan”，“李巘小”应输入为“李yanxiao”。</div>
        </div>
      </div>
    </div>
    <div class="pop-select-bottom" v-show="lklx" @click="show('lklx')">
      <ul class="pop-select">
        <li class="item" :class="piType=='成人       ≥12'?'selected':''" @click="lklx_sel(1)">成人 ≥12</li>
        <li class="item" :class="piType=='儿童       2Y≤年龄﹤12Y'?'selected':''" @click="lklx_sel(2)">儿童 2Y≤年龄﹤12Y</li>
        <li class="item" :class="piType=='婴儿       14D≤年龄﹤2Y'?'selected':''" @click="lklx_sel(3)">婴儿 14D≤年龄﹤2Y</li>
      </ul>
    </div>
    <div class="pop-select-bottom" v-show="zjlx" @click="show('zjlx')">
      <ul class="pop-select">
        <li class="item" :class="piNumberType=='身份证'?'selected':''" @click="zjlx_sel(1)">身份证</li>
        <li class="item" :class="piNumberType=='护照'?'selected':''" @click="zjlx_sel(2)">护照</li>
        <li class="item" :class="piNumberType=='其他'?'selected':''" @click="zjlx_sel(3)">其他</li>
      </ul>
    </div>
    <div>
      <div class="ub bg_w ub-ac ub-pj pad_1" @click="show('lklx')">
        <div class="ub ub-ac wd_30">旅客类型</div>
        <input readonly="readonly" class="ub bg_w ub-f1 holder_d" v-model="piType">
        <div class="ub ub-ac ub-pe">
          <div><img class="ub img5" src="./arrow_right@2x.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-pj pad_1">
        <div class="ub wd_30">旅客姓名</div>
        <div class="ub-f1">
          <input class="ub bg_w ub-f1 holder_d bb pad_b1" v-model="piLname" style="border-bottom:1px solid #eee;" placeholder="姓 (last_name)">
          <input class="ub bg_w ub-f1 holder_d mar_t1" v-model="piFname" placeholder="名 (first_name)">
        </div>
        <div class="ub ub-ac ub-pe" @click="show('shuo')">
          <div><img class="ub img5" src="./question.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1" v-show="piType!='婴儿       14D≤年龄﹤2Y'" @click="show('zjlx')">
        <div class="ub ub-ac wd_30">证件类型</div>
        <input readonly="readonly" class="ub bg_w ub-f1 holder_d" v-model="piNumberType">
        <div class="ub ub-ac ub-pe">
          <div><img class="ub img5" src="./arrow_right@2x.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1" v-show="piType!='婴儿       14D≤年龄﹤2Y'">
        <div class="ub ub-ac wd_30">证件号码</div>
        <input class="ub bg_w ub-f1 holder_d" v-model="piNumber" placeholder="请输入证件号码">
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1 borndate1" v-show="false" @click="show('csrq')">
        <div class="ub ub-ac wd_30">到期日期</div>
        <input readonly="readonly" type="text" class="ub bg_w ub-f1 holder_d" placeholder="请选择护照到期日期" v-model="piExpirationDate">
        <div class="ub ub-ac ub-pe">
          <div><img class="ub img5" src="./arrow_right@2x.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1 borndate" v-show="piType=='儿童       2Y≤年龄﹤12Y'||piType=='婴儿       14D≤年龄﹤2Y'||piNumberType=='护照'||piNumberType=='其他'" @click="show('csrq')">
        <div class="ub ub-ac wd_30">出生日期</div>
        <input readonly="readonly" type="text" class="ub bg_w ub-f1 holder_d" placeholder="请选择" v-model="piBirthDay">
        <div class="ub ub-ac ub-pe">
          <div><img class="ub img5" src="./arrow_right@2x.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1">
        <div class="ub ub-ac wd_30">手机号码</div>
        <input class="ub bg_w ub-f1 holder_d " v-model="piMobile" placeholder="请输入手机号码">
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1" v-show="piType=='成人       ≥12'">
        <div class="ub ub-ac wd_30">联系邮箱</div>
        <input class="ub bg_w ub-f1 holder_d " v-model="piEmail" placeholder="请输入联系邮箱(非必填)">
      </div>
    </div>
    <div class="ub commit mar_05 ub-pc ub-ac" @click="submit">
      <div>保存</div>
    </div>
    <div class="ub dele mar_05 ub-pc ub-ac" v-show="isEdit" @click="dele()">
      <div>删除</div>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
import { mapState } from 'vuex';
import $ from '../../../static/jquery/index.js'
export default {
  name: 'addPassenger',
  created: function () {
    if (this.passenger.person) {
      this.isEdit = true;
      console.log(this.passenger.person)
      this.piFname = this.passenger.person.pifname;
      this.piLname = this.passenger.person.pilname;
      this.piNumberType = this.passenger.person.pinumbertype;
      this.piNumber = this.passenger.person.pinumber;
      this.piBirthDay = this.passenger.person.pibirthday;
      this.piMobile = this.passenger.person.pimobile;
      this.piEmail = this.passenger.person.piemail;
      this.piExpirationDate = this.passenger.person.piexpirationdate;
      if (this.passenger.person.pitype === '成人') {
        this.piType = '成人       ≥12'
      } else if (this.passenger.person.pitype === '儿童') {
        this.piType = '儿童       2Y≤年龄﹤12Y'
      } else if (this.passenger.person.pitype === '婴儿') {
        this.piType = '婴儿       14D≤年龄﹤2Y'
      }
      this.title = '修改乘机人'
      this.opt('', 3);
    } else {
      this.title = '添加乘机人'
      this.opt('', '');
    }
  },
  computed: mapState(['loginData', 'passenger']),
  data: function () {
    return {
      isEdit: false,
      lklx: false,
      zjlx: false,
      shuo: false,
      csrq: false,
      piType: '成人       ≥12',
      piNumberType: '身份证',
      piNumber: '',
      piBirthDay: '',
      piEmail: '',
      piMobile: '',
      piFname: '',
      piLname: '',
      title: '',
      piExpirationDate: ''
    };
  },
  components: {

  },
  methods: {
    backClc: function () {
      let self = this;
      this.$store.commit('setConfirm', { ifShow: true, text: '确定要返回吗' });
      this.$store.commit('setConfirmCallBak', function () {
        self.$router.go(-1);
      });
    },
    dele: function () {
      let self = this;
      // userInfo登陆后的数据
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId;
      let loginToken = userInfo.token.loginToken;
      let userMobile = userInfo.userMobile;
      let content = {
        'piid': this.passenger.person.piid,
        'userMobile': userMobile,
        'userId': userId
      };
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId + '';
      data.headers.loginToken = loginToken;
      this.$store.commit('showLoading');
      this.$http.post(this.$RS.delePassenger, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          console.log(res)
          res = res.body;
          if (res.code === 1000) {
            this.$store.dispatch('showTx', { text: '删除成功' });
            setTimeout(function () {
              self.$router.go(-1)
            }, 1500)
          } else {
            this.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
          }
        },
        function (err) {
          this.$store.commit('closePop');
          // 响应错误回调
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    GetLength: function (str) {
      let realLength = 0;
      let charCode = '';
      for (let i = 0; i < str.length; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128) {
          realLength += 1;
        } else {
          realLength += 2;
        }
      }
      return realLength;
    },
    submit: function () {
      let self = this;
      let pitype = this.piType.substr(0, 2);
      let pilname = this.$utils.regTest(this.piLname + this.piFname, 'cname', this);
      let pifname = this.$utils.regTest(this.piLname + this.piFname, 'cname', this);
      console.log(this.GetLength(this.piLname + this.piFname))
      if (this.GetLength(this.piLname + this.piFname) > 24) {
        this.$store.dispatch('showTx', { text: '您填写的证件姓名过长' });
        return;
      }
      let pinumbertype = this.piNumberType === '身份证' ? 'id' : 'passport';
      let pinumber = '';
      let pimobile = this.$utils.regTest(this.piMobile, 'phoneNum', this);
      let piemail = this.piEmail;
      let pibirthday = this.piBirthDay;
      switch (pitype) {
        case '成人':
          pinumber = this.$utils.regTest(this.piNumber, pinumbertype, this);
          if (!pifname || !pilname || !pinumber || !pimobile) {
            return;
          }
          if (piemail) {
            if (!this.$utils.regTest(piemail, 'email', this)) {
              return;
            }
          }
          break;
        case '儿童':
          pinumber = this.$utils.regTest(this.piNumber, pinumbertype, this);
          if (!pifname || !pilname || !pinumber || !pimobile) {
            return;
          }
          if (!pibirthday) {
            this.$store.dispatch('showTx', { text: '请填入生日' });
            return;
          }
          break;
        case '婴儿':
          if (!pifname || !pilname || !pimobile) {
            return;
          }
          pinumber = ''
          if (!pibirthday) {
            this.$store.dispatch('showTx', { text: '请填入生日' });
            return;
          }
          break;
        default:
          return;
      }
      pilname = this.piLname;
      pifname = this.piFname
      if (this.piNumberType === '护照') {
        if (!this.$utils.regTest(pifname, 'ename', this)) {
          return;
        }
        if (!this.$utils.regTest(pilname, 'ename', this)) {
          return;
        }
        if (!this.$utils.regTest(pinumbertype, 'passport', this)) {
          return;
        }
        if (!pibirthday) {
          this.$store.dispatch('showTx', { text: '请填入生日' });
          return;
        }
      }
      // userInfo登陆后的数据
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId;
      let loginToken = userInfo.token.loginToken;
      let userMobile = userInfo.userMobile;
      let content = {};
      let url = '';
      if (this.isEdit) {
        url = this.$RS.editPassenger;
        content = {
          'piid': this.passenger.person.piid,
          'piEmail': piemail,
          'piCountry': '',
          'piDomOrInt': '1', // 1-国内，2-国际
          'bak2': '', // 性别【选填】 M-男，F-女
          'bak1': '', // 国籍【选填】非中国时必填
          'piNumberType': this.piNumberType,
          'piFname': pifname,
          'userId': userId + '',
          'piNumber': pinumber,
          'piExpirationDate': this.piExpirationDate,
          'userMobile': userMobile,
          'piLname': pilname,
          'piMobile': pimobile,
          'piBirthDay': pibirthday,
          'piType': pitype
        }
      } else {
        url = this.$RS.addPassenger;
        content = {
          'piEmail': piemail,
          'piDomOrInt': '1', // 1-国内，2-国际
          'bak2': '', // 性别【选填】 M-男，F-女
          'piNumberType': this.piNumberType,
          'piFname': pifname,
          'userId': userId + '',
          'piNumber': pinumber,
          'piExpirationDate': this.piExpirationDate,
          'userMobile': userMobile,
          'piLname': pilname,
          'piMobile': pimobile,
          'piBirthDay': pibirthday,
          'piType': pitype
        }
      }
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId + '';
      data.headers.loginToken = loginToken;
      this.$store.commit('showLoading');
      console.log(data)
      this.$http.post(url, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body
          console.log(res);
          if (res.code === 1000) {
            this.$store.dispatch('showTx', { text: self.isEdit ? '修改成功' : '添加成功' });
            setTimeout(function () {
              self.$router.go(-1)
            }, 1500)
          } else if (res.code === 2066) {
            this.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
            self.$router.push('/login')
          } else {
            this.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
          }
        },
        function (err) {
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    opt: function (dat, tal) {
      var self = this;
      var nowDate = new Date();
      var mindat = '';
      var maxdat = '';
      var opts = {};
      opts.date = {
        preset: 'date'
      };
      // opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
      opts.datetime = {
        preset: 'datetime'
      };
      opts.time = {
        preset: 'time'
      };
      if (this.piType === '成人       ≥12') {
        mindat = new Date((nowDate.getFullYear() - 99) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate());
        maxdat = new Date((nowDate.getFullYear() - 12) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate());
      } else if (this.piType === '儿童       2Y≤年龄﹤12Y') {
        mindat = new Date(new Date((nowDate.getFullYear() - 12) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate())
          .getTime() + 1000 * 60 * 60 * 24);
        maxdat = new Date((nowDate.getFullYear() - 2) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate());
      } else if (this.piType === '婴儿       14D≤年龄﹤2Y') {
        mindat = new Date((nowDate.getFullYear() - 2) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate());
        maxdat = new Date(new Date((nowDate.getFullYear()) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate()).getTime() -
          1000 * 60 * 60 * 336);
      }
      opts.default = {
        theme: 'android-holo light', // 皮肤样式
        display: 'bottom', // 显示方式
        mode: 'scroller', // 日期选择模式
        lang: 'zh',
        dateFormat: 'yyyy-mm-dd',
        dateOrder: 'yymmdd',
        minDate: mindat,
        maxDate: maxdat,
        rows: 5,
        onSelect: function (valueText, inst) {
          console.log(valueText);
          self.piBirthDay = valueText
        }
      };
      opts.default1 = {
        theme: 'android-holo light', // 皮肤样式
        display: 'bottom', // 显示方式
        mode: 'scroller', // 日期选择模式
        lang: 'zh',
        dateFormat: 'yyyy-mm-dd',
        dateOrder: 'yymmdd',
        minDate: new Date((nowDate.getFullYear()) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate()),
        maxDate: new Date((nowDate.getFullYear() + 55) + '/' + (nowDate.getMonth() + 1) + '/' + nowDate.getDate()),
        rows: 5,
        onSelect: function (valueText, inst) {
          console.log(valueText);
          self.piExpirationDate = valueText
        }
      };
      /*       console.log($) */
      setTimeout(function () {
        $('.borndate').mobiscroll().date(opts.default);
        $('.borndate1').mobiscroll().date(opts.default1);
      }, 500);
    },
    show: function (data) {
      console.log(data)
      switch (data) {
        case 'lklx':
          this.lklx = !this.lklx;
          break;
        case 'zjlx':
          this.zjlx = !this.zjlx;
          break;
        case 'shuo':
          this.shuo = !this.shuo;
          break;
        case 'csrq':
          this.csrq = !this.csrq;
          break;
      }
    },
    lklx_sel: function (type) {
      /*  this.piNumber = '';
       this.piBirthDay = '';
       this.piEmail = '';
       this.piMobile = '';
       this.piFname = '';
       this.piLname = '';
       this.piNumberType = '身份证';
       // this.opt(dats, type); */
      switch (type) {
        case 1:
          this.piType = '成人       ≥12';
          break;
        case 2:
          this.piType = '儿童       2Y≤年龄﹤12Y';
          break;
        case 3:
          this.piType = '婴儿       14D≤年龄﹤2Y';
          break;
      }
      this.opt('', type);
    },
    zjlx_sel: function (type) {
      // this.opt('', type);
      switch (type) {
        case 1:
          this.piNumberType = '身份证';
          break;
        case 2:
          this.piNumberType = '护照';
          break;
        case 3:
          this.piNumberType = '其他';
          break;
      }
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.span-1
  font-size: f_times(0.2);
  width: f_times(1.5);
  height: f_times(1);
.padding-css2
  padding: $fontSize;
.mt-1
  margin-top: 1rem;
  line-height: f_times(1.5);
.submit
  background: rgba(132, 61, 153, 1);
  height: f_times(3.5);
  color: #fff;
  border-radius: f_times(0.5);
  margin-top: f_times(2);
.pop-select-bottom
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;
  background: rgba(0, 0, 0, 0.6);
.margin-l05
  margin-left: f_times(0.5);
.mar_t05
  margin-top: f_times(0.5);
.margin-l1
  margin-left: $fontSize;
.pop-select
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  background: #fff;
.pop-select .item
  height: 5rem;
  line-height: 5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-right: 2rem;
.pop-select .selected
  background: url('./tick@2x.png') no-repeat right center;
  background-size: 1.6rem;
input
  height: f_times(1.5);
.pad_1
  border-bottom: 1px solid #eee;
  padding: f_times(1.2) f_times(0.5) f_times(1.2) f_times(0.5);
.downA
  width: f_times(1.5);
  height: f_times(1.5);
  margin-left: f_times(0.3);
.sel_box
  position: absolute;
  z-index: 10;
  left: f_times(0.6);
  top: f_times(1.6);
  border: 1px solid #f2f2f2;
.sel_box > div
  width: f_times(4);
.idsel
  width: f_times(3);
.commit
  background-color: #843d99;
  color: white;
  width: 100% -$fontSize;
  box-sizing: border-box;
  height: f_times(2.5);
  border-radius: 3px;
  margin-top: f_times(1.5);
.dele
  background-color: #fff;
  border: 1px solid #843d99;
  color: black;
  width: 100% -$fontSize;
  box-sizing: border-box;
  height: f_times(2.5);
  border-radius: 3px;
  margin-top: f_times(1.5) !important;
.headerDiv
  font-size: $fontSize;
  width: 100%;
  height: f_times(2.5);
  background-color: #843d99;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
.posDiv
  height: f_times(2.5);
  z-index: -1;
.left, .right
  width: 20%;
.middle
  width: 100% - f_times(2.5);
.leftIcon
  height: $fontSize;
  width: $fontSize;
  background-image: url('');
.closeIcon
  height: $fontSize;
  width: $fontSize;
  background-image: url('./../header/nav_close@2x.png');
.homeIcon
  height: f_times(1.8);
  width: f_times(1.8);
  background-image: url('./../header/nav_home_white@2x.png');
</style>